<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>选择器的权重</title>
    <style>

        #box1 {
            background-color: pink;
        }

        div {
            background-color: red;
        }

        .red {
            background-color: orange;
        }

        .d1 {
            background-color: rebeccapurple;
        }

        /*这里是单独计算权重的分组选择器*/
        div, p, span {
            background-color: yellowgreen;
        }

        /*
          样式的冲突
              - 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值,此时就发生了样式冲突

          发生样式冲突时,应用哪个样式由选择器的权重(优先级决定)

          选择器的权重
              内联样式                        1,0,0,0
              id选择器                        0,1,0,0
              类和伪类选择器                     0,0,1,0
              元素选择器                         0,0,0,1
              通配选择器                         0,0,0,0
              继承的样式                         没有优先级

          比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则优先级越明显 (分组选择器是单独计算),
              选择器的累加不会超过其最大的数量级,类选择器的优先级再高,也不会超过id选择器
              如果优先级计算后相同,此时则优先使用靠下的样式

          可以再某一个样式的后边添加!important,则此时该样式会获取到最高的优先级,甚至超过内联样式。
              注意: 在开发中这个玩意一定要慎用,它会导致js也不能修改属性

        */
        /*下面的是通配选择器*/
        * {
            font-size: 100px;
        }

    </style>
  </head>
  <body>
    <div id="box1" class="red d1" style="background-color: skyblue">我是一个div</div>

  </body>
</html>
